<template>
  <view>
  <!--登录信息功能-->
  <view class="box_one">
    <navigator url="/pages/login/login" v-if="!usershow.username">
    <view class="user-info"> 
      <image src="../../static/image/nohead.png" class="user-avatar"></image>
    <view class="user-details">
      <text style="padding-bottom: 30rpx;font-size: 35rpx;">用户名:</text>
      <text style="padding-top: 20rpx;font-size: 35rpx;">邮箱:</text>
    </view>
    </view>
    
    </navigator>
    <view class="user-info" v-else>
      <image :src="usershow.avatar" class="user-avatar"></image>
    <view class="user-details">
      <text style="padding-bottom: 30rpx;font-size: 35rpx;">用户名:{{usershow.username}}</text>
      <text style="padding-top: 20rpx;font-size: 35rpx;">邮箱:{{usershow.email}}</text>
    </view>
    </view>
  </view>
  <view style="display: flex;margin-left: 40rpx;margin-top: 40rpx;">
    <view style="height: 120rpx;width: 250rpx;background-color: #ffffff;margin-right: 30rpx;border-radius: 20rpx;box-shadow: 10px 5px 5px #afafaf;display: grid;justify-content: center;align-items: center;" @click="login">
      <image src="../../static/image/login.png" style="height: 70rpx;width: 70rpx;"></image>
      <text style="font-size: 32rpx;">登录</text>
    </view>
    <view style="height: 120rpx;width: 250rpx;background-color: #ffffff;margin-right: 30rpx;border-radius: 20rpx;box-shadow: 10px 5px 5px #afafaf;display: grid;justify-content: center;align-items: center;" @click="register">
      <image src="../../static/image/register.png" style="height: 70rpx;width: 70rpx;"></image>
      <text style="font-size: 32rpx;">注册</text>
    </view>
    <view style="height: 120rpx;width: 250rpx;background-color: #ffffff;margin-right: 30rpx;border-radius: 20rpx;box-shadow: 10px 5px 5px #afafaf;display: grid;justify-content: center;align-items: center;" @click="quit">
      <image src="../../static/image/quitlogin.png" style="height: 70rpx;width: 70rpx;"></image>
      <text style="font-size: 32rpx;">退出</text>
    </view>
    
  </view>
</view>
</template>

<script>
  export default {
    data() {
      return {
        usershow:{
          avatar:"",//头像图片
          username:"",
          email:""
        }
        
      };
    },
     onLoad() {
        const userInfo = uni.getStorageSync('honey-user');
        if (userInfo) {
          this.usershow = userInfo;
        }
        console.log(this.usershow);
      },
      methods:{
        login(){
          uni.navigateTo({
            url:'/pages/login/login'
          })
        },
        register(){
          uni.navigateTo({
            url:'/pages/register/register'
          })
        },
        quit(){
          //清除本地存储的用户信息
          uni.removeStorageSync('honey-user');
          
          this.usershow={
            avatar:"",
            username:"",
            email:""
          };
          uni.navigateTo({
            url:'/pages/login/login'
          })
          
        }
      }
      
  }
</script>

<style>
  .box_one{
    width: 700rpx;
    height: 300rpx;
    background-color: #ffffff;
    margin: 25rpx;
    border-radius: 20px;
    box-shadow: 10px 5px 5px #afafaf;
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .user-info {
    display: flex; 
    align-items: center; 
  }
.user-avatar{
  width: 200rpx;
  height: 200rpx;
  margin-left: 20rpx; 
  margin-right: 30rpx;
}
.user-details {
  display: flex; 
  flex-direction: column; 
}

</style>
